<template>
  <Container>
    <template #header>
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item label="登录地址" prop="ipaddr">
          <el-input v-model="queryParams.ipaddr" placeholder="请输入登录地址" clearable style="width: 240px;"
            @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item label="用户名称" prop="userName">
          <el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable style="width: 240px;"
            @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="queryParams.status" placeholder="登录状态" clearable style="width: 240px">
            <el-option v-for="dict in dict.type.sys_common_status" :key="dict.value" :label="dict.label"
              :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="登录时间">
          <el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
            range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
            v-hasPermi="['monitor:logininfor:remove']">删除</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="danger" plain icon="el-icon-delete" size="mini" @click="handleClean"
            v-hasPermi="['monitor:logininfor:remove']">清空</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
            v-hasPermi="['monitor:logininfor:export']">导出</el-button>
        </el-col>
        <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>
    </template>
    <template #default>
      <el-table ref="tables" v-loading="loading" :data="list" @selection-change="handleSelectionChange"
        :default-sort="{ prop: 'loginTime', order: 'descending' }" @sort-change="handleSortChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="访问编号" align="center" prop="infoId" />
        <el-table-column label="用户名称" align="center" prop="userName" show-overflow-tooltip sortable="custom"
          :sort-orders="['descending', 'ascending']" />
        <el-table-column label="登录地址" align="center" prop="ipaddr" width="130" show-overflow-tooltip />
        <el-table-column label="登录地点" align="center" prop="loginLocation" show-overflow-tooltip />
        <el-table-column label="浏览器" align="center" prop="browser" show-overflow-tooltip />
        <el-table-column label="操作系统" align="center" prop="os" />
        <el-table-column label="登录状态" align="center" prop="status">
          <template v-slot="{ row }">
            <dict-tag :options="dict.type.sys_common_status" :value="row.status" />
          </template>
        </el-table-column>
        <el-table-column label="操作信息" align="center" prop="msg" />
        <el-table-column label="登录日期" align="center" prop="loginTime" sortable="custom"
          :sort-orders="['descending', 'ascending']" width="180">
          <template v-slot="{ row }">
            <span>{{ parseTime(row.loginTime) }}</span>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <template #footer>
      <Page v-model:current="page.current" v-model:size="page.size" :total="page.total" @change="getList" />
    </template>
  </Container>
</template>

<script setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import { list, delLogininfor, cleanLogininfor } from "@/api/monitor/logininfor";
import { clearJson } from '@/utils'
import { Constant } from '@/utils/constant'
const refForm = ref()
const refTable = ref()
const loading = ref(false)
const ids = ref([])
const multiple = ref(true)
const form = reactive({
  ipaddr: undefined,
  userName: undefined,
  status: undefined
})
const page = reactive({
  current: 1,
  size: Constant.PAGESIZE,
  total: 0
})
const list = ref([])

const getList = () => {
  const { current, size } = page
  const params = {
    ...form,
    current,
    size
  }
  loading.value = true
  pageApi(params).then(r => {
    if (r) {
      list.value = r.data.list
      page.total = r.data.total
    }
    nextTick(() => {
      loading.value = false
    })
  })
}
//列表排序
const handleSortChange = ({ column, prop, order }) => {
  page.orderByColumn = prop;
  page.isAsc = order;
  page.current = 1
}

const handleQuery = () => {
  page.current = 1
  getList();
}
/** 多选框选中数据 */
const handleSelectionChange = (val) => {
  ids = val.map(item => item.id)
  multiple = !val.length
}

const resetQuery = () => {
  clearJson(form)
  getList()
}

/** 删除按钮操作 */
const handleDelete = (id) => {
  const ids = id ? [id] : selection.value.map(item => item.id)
  ElMessageBox.confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    deleteApi({ keys: ids }).then(r => {
      if (r) {
        ElMessage({
          message: '操作成功!',
          type: 'success'
        })
        getList()
      }
    })
  }).catch(() => {
    // to do something on canceled
  })
}
/** 清空按钮操作 */
const handleClean = () => {
  ElMessageBox.confirm('是否确认清空所有登录日志数据项？', '提示', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    cleanLogininfor().then(r => {
      if (r) {
        ElMessage({
          message: '操作成功!',
          type: 'success'
        })
        getList()
      }
    })
  }).catch(() => {
    // to do something on canceled
  })
}
/** 导出按钮操作 */
const handleExport = () => {
  exportApi(form);

}

onBeforeMount(() => {
  getList()
})

</script>

